import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom'
import { Modal, Button, Input, Space } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { Typography } from 'antd';
import { Form, Checkbox } from 'antd';
import axios from 'axios'
import api from '../../utils/requestUtils/apiConfig'
import { saveUserInfoByType ,loginFail} from '../../utils/loginUtils/loginMethod'


export default ({
    visible,
    setVisible,
}) => {
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [username, setUsername] = useState('');
    //密码
    const [password, setPassword] = useState('');
    const { Title, Text } = Typography;
    const showModal = () => {
        setVisible(true);
    };

    //点击登录的回调方法
    const handleOk = async (values) => {
        const params = {
            username: values.username,
            password: values.password,
        }
        setConfirmLoading(true);
        await axios({
            url: api.userLogin,
            method: 'post',
            headers: '',
            params: '',
            data: params
        }).then((result) => {
            setConfirmLoading(false);
            let returnData = result.data
            if (returnData.code === 1 && returnData.data != null) {
                //分等级将用户信息放入不同的WebStorage中
                console.log(returnData.data)
                saveUserInfoByType(returnData.data)
                setVisible(false);
            }
            else {
                //登录失败，用户名密码错误
                console.log(returnData, '用户名或密码错误')
                setPassword('')
                loginFail();
            }
            

        }).catch((error) => {
            console.log(error)
            setConfirmLoading(false);
        })
    };

    const handleCancel = () => {
        setVisible(false);
    };

    //表单布局
    const layout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 16,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };



    return (
        <>
            <Modal
                title="登录"
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={false}
            >
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={handleOk}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="账号："
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号！',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]}
                    >
                        <Input.Password
                            value={password}
                            onChange={(e) => { setPassword(e.target.value) }}
                        />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={confirmLoading}
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>


            </Modal>
        </>
    )
}